<template>
	<div class="attributes-box" :action="action">
		<div class="title">
			<div class="text">
				<div class="item" @click="select = 'control'" :class="{ select: select == 'control' }">
					<i class="fa-duotone fa-copy" style="color: #0052cc; padding: 0 5px" />
					<span>组件属性</span>
				</div>
				<div style="margin-left: 20px;" class="item" @click="select = 'form'"
					:class="{ select: select == 'form' }">
					<i class="fa-duotone fa-memo" style="color: #0052cc; padding: 0 5px" />
					<span>表单配置</span>
				</div>
			</div>
			<div class="fold" @click="foldClick"><i class="fa-sharp-duotone fa-solid fa-chevron-down" /></div>
		</div>
		<div class="attributes">
			<div class="content">
				<formAttributes v-show="select == 'form'" v-model="formData"></formAttributes>
				<controlsAttributes v-show="select == 'control'" @selectAttribute="selectAttribute">
				</controlsAttributes>
			</div>
		</div>
	</div>
</template>
<script setup>
import formAttributes from "./form"
import controlsAttributes from "./controls"
let select = ref("form");
let action = ref(false);
const formData = defineModel();
const foldClick = (e) => {
	action.value = !action.value;
};
const selectAttribute = (e) => {
	select.value = e;
};
</script>
<style>
@import './index.scss';
</style>